<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('缓存线故障报表')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            缓存线编码：<input type="text" name="shelfCode"/>
                        </li>
                        <li>
                            <label>创建时间：</label>
                            <el-date-picker
                                name="startTime"
                                v-model="timeA"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                name="endTime"
                                v-model="timeB"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="resetTime()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="fault:export">
                <i class="fa fa-download"></i> 导出全部
            </a>
            <a class="btn btn-info" @click="partExcel()" shiro:hasPermission="fault:partExcel">
                <i class="fa fa-download"></i> 部分导出
            </a>
            <a class="btn btn-primary" onclick="$.table.print()">
                <i class="fa fa-plus"></i> 打印
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "fault";

    var app = new Vue({
        el: '.container-div',
        data: {
            timeA: '',
            timeB: ''
        },
        methods: {
            //时间对比
            compareAB: function(){
                if(this.timeA != '' && this.timeA != null){
                    if(this.timeB != '' && this.timeB != null){
                        var a = new Date(this.timeA);
                        var b = new Date(this.timeB);
                        if(a >= b){
                            $.modal.alertError("结束时间需大于开始时间，请重新选择！！");
                            this.timeA = '';
                            this.timeB = '';
                        }
                    }else{
                        this.timeB = '';
                    }
                }else{
                    this.timeA = '';
                    if(this.timeB == null){
                        this.timeB = '';
                    }
                }
            },
            //清空时间
            resetTime(){
                this.timeA = '';
                this.timeB = '';
            },
            //部分导出
            partExcel(){
                var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
                if(rows.length == 0){
                    $.modal.alertWarning("请至少选择一条记录");
                    return;
                }else{
                    $.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
                        var url = prefix + "/partExcel";
                        var data = {"ids": rows.join()};
                        $.post(url, data, function(result){
                            if(result.code == web_status.SUCCESS){
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                            }else if(result.code == web_status.WARNING){
                                $.modal.alertWarning(result.msg);
                            }else{
                                $.modal.alertError(result.msg);
                            }
                            $.modal.closeLoading();
                        });
                    });
                }
            }
        }
    })

    $(function() {
        var options = {
            url: prefix + "/findList",
            exportUrl: prefix + "/export",
            modalName: "缓存线故障报表",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'shelfId',
                    title: '缓存线ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'shelfCode',
                    title: '缓存线编码',
                    align: 'center'
                },
                {
                    field: 'description',
                    title: '故障原因',
                    align: 'center'
                },

                {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    formatter: function(value, item, index){
                        if(value == null){
                            return '-';
                        }else{
                            return value.slice(0, 19);
                        }
                    }
                }
            ]
        };
        $.table.init(options);
    });
</script>
</body>
</html>
